﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--<link rel="stylesheet" href="css/input.css" type="text/css" />-->
    <link rel="icon"href="img/pic1.jpg">
    <link rel="stylesheet" href="css/baidu.css">

</head>
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
<script>
    window.onload=function(){
        new Vue({
            el:'#box',
            data:{
                myData:[],
                t1:'',
                now:-1,
                isShow:true,
            },
            methods:{
                get:function(ev){
                    if(ev.keyCode==38 || ev.keyCode==40)return;

                    if(ev.keyCode==13){
                        window.open('https://www.baidu.com/s?wd='+this.t1);
                        this.t1='';
                    }

                    this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
                        wd:this.t1
                    },{
                        jsonp:'cb'
                    }).then(function(res){
                        this.myData=res.data.s;
                        this.isShow='true'
                    },function(){

                    });
                },
                search:function(){
                    window.open('https://www.baidu.com/s?wd='+this.t1);
                    this.t1='';
                },
                changeDown:function(){
                    this.now++;
                    if(this.now==this.myData.length)this.now=-1;
                    this.t1=this.myData[this.now];
                },
                changeUp:function(){
                    this.now--;
                    if(this.now==-2)this.now=this.myData.length-1;
                    this.t1=this.myData[this.now];
                },
                clk:function(e){
                    var index=e.target.innerText;
                    this.t1=index;
                    var input=document.getElementById("input");
//                    console.log(input)
                    input.style.color="blue";
                    input.focus()
                    this.isShow=false;
                    var boxUl=document.getElementById("boxUl");
                    console.log(boxUl);

                }
            }
        });


    };
</script>

<body  >

<section>

    <div id="box" >
        <sapn class="center">
                <span class="center_left">
                    <input id="input" type="text" v-model="t1" @keydown="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()" value="请输入你想要搜索的关键字" onfocus="clearText(this)">
                    <ul id="boxUl" v-if="isShow" >
                        <li v-text="value" v-for="value in myData" :class="{gray:$index==now}" @click="clk($event)" >
                            <!--{{value}}-->
                        </li>
                    </ul>
                </span>
            <span class="center_right">
                    <input type="button" value="搜索" @click="search()">
                </span>
        </sapn>

    </div>
</section>


<script>
</script>
</body>
</html>
